<%--
    Document   : indexHeader
    Created on : Mar 7, 2013, 8:28:36 AM
    Author     : ThanhTai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Index</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/xmlproject.js"></script>

        <script type ="text/javascript">
            var RE_USERNAME = /^[A-Za-z0-9 ]{3,20}$/;
            var RE_EMAIL = /^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$/;
            var RE_PASSWORD = /^[A-Za-z0-9 ]{3,20}$/;
            var RE_PHONE = /^[0-9]{8,12}$/;
            var RE_ADD = /^[A-Za-z0-9\.\, ]{3,200}$/;

            function validate (){
                var regUser = document.getElementById("txtFullname").value.toString();
                var email = document.getElementById("txtEmail").value.toString();
                var pass = document.getElementById("txtPassword1").value.toString();
                var rePass = document.getElementById("txtRetypePassword").value.toString();
                var phone = document.getElementById("txtPhone").value.toString();
                var add = document.getElementById("txtAddress").value.toString();
                var haveError=false;
                document.getElementById("notiUser").innerHTML= " ";
                document.getElementById("notiMail").innerHTML= " ";
                document.getElementById("notiPass").innerHTML= " ";
                document.getElementById("notiRePass").innerHTML= " ";
                document.getElementById("notiPhone").innerHTML= " ";
                document.getElementById("notiAdd").innerHTML= " ";
                if (!RE_USERNAME.test(regUser)){
                    document.getElementById("notiUser").innerHTML= "*Invalid fullname.";
                    haveError=true;
                }
                else if(!RE_EMAIL.test(email)){
                    document.getElementById("notiUser").innerHTML= " ";
                    document.getElementById("notiMail").innerHTML="*Invalid email.";
                    haveError=true;
                }
                else if(!RE_PASSWORD.test(pass)){
                    document.getElementById("notiMail").innerHTML= " ";
                    document.getElementById("notiPass").innerHTML= "*Invalid password.";
                    haveError=true;
                }
                else if(pass != rePass){
                    document.getElementById("notiPass").innerHTML= " ";
                    document.getElementById("notiRePass").innerHTML= "*Invalid retype password.";
                    haveError=true;
                }
                else if(!RE_PHONE.test(phone)){
                    document.getElementById("notiRePass").innerHTML= " ";
                    document.getElementById("notiPhone").innerHTML= "*Invalid phone.";
                    haveError=true;
                }
                else if(!RE_ADD.test(add)){
                    document.getElementById("notiPhone").innerHTML= " ";
                    document.getElementById("notiAdd").innerHTML= "*Invalid address.";
                    haveError=true;
                }
                else {
                    document.getElementById("notiAdd").innerHTML= " ";
                }

                if(haveError){
                    return false;
                }
                return true;
            }

            function registerCustomer(){
                if (validate()){
                    var regUser = document.getElementById("txtFullname").value.toString();
                    var email = document.getElementById("txtEmail").value.toString();
                    var pass = document.getElementById("txtPassword1").value.toString();
                    var phone = document.getElementById("txtPhone").value.toString();
                    var add = document.getElementById("txtAddress").value.toString();
                    
                    var string="<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>";
                    //                    string=string+"<customers>";
                    string=string+"<customer>";
                    string = string + "<custEmail>";
                    string = string + email;
                    string = string + "</custEmail>";
                    string = string + "<custPassword>";
                    string = string + pass;
                    string = string + "</custPassword>";
                    string = string + "<custName>";
                    string = string + regUser;
                    string = string + "</custName>";
                    string = string + "<custPhone>";
                    string = string + phone;
                    string = string + "</custPhone>";
                    string = string + "<custAddress>";
                    string = string + add;
                    string = string + "</custAddress>";
                    string = string + "</customer>";
                    //                    string = string + "</customers>";
                    
                    document.getElementById("Message").innerHTML="<p class=\"Message\">Sending request...</p>";
                    var xmlDetailHttp= null;
                    try {
                        xmlDetailHttp = XMLHttpRequest();
                    }catch(e){
                        try{
                            xmlDetailHttp = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch(e){
                            xmlDetailHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                    }
                    if(xmlDetailHttp==null){
                        alert("Your browser does not support AJAX!")
                        return;
                    }
                    try{
                        var url= "GuestController?action=register&xmlContext="+ string.toString();
                        xmlDetailHttp.open("GET",url,true);
                        xmlDetailHttp.send(null);

                        // get response o SearchHotelServlet action=ViewDetail
                        xmlDetailHttp.onreadystatechange = function()
                        {
                            if(xmlDetailHttp.readyState==4 && xmlDetailHttp.status==200){
                                // lay response text
                                var response = xmlDetailHttp.responseText;
                                if(response == 'Email is Existed') {
                                    document.getElementById("Message").innerHTML="<p class=\"Message\">This email is not available.</p>";
                                }else if(response == 'true') {
                                    document.getElementById("Message").innerHTML="<p class=\"Message\">Register is sucessful.</p>";
                                    document.getElementById('button-register').innerHTML = "<a href=\"index.jsp\">Back homepage</a>";

                                    //readonly all textbox
                                    document.getElementById("txtFullname").disabled=true;
                                    document.getElementById("txtEmail").disabled=true;
                                    document.getElementById("txtPassword1").disabled=true;
                                    document.getElementById("txtRetypePassword").disabled=true;
                                    document.getElementById("notiRePass").disabled=true;
                                    document.getElementById("txtPhone").disabled=true;
                                    document.getElementById("txtAddress").disabled=true;
                                }else if(response == 'false') {
                                    document.getElementById("Message").innerHTML="<p class=\"Message\">Try again.</p>";
                                }
                            }
                        }
                    }catch(e){
                        alert("error: "+ e);
                    }
                }
            }

        </script>

    </head>
    <body>
        <div id="wrapper">
            <jsp:include page="indexHeader.jsp"></jsp:include>


            <div id="body">
                <!--                <div class="slide">
                                </div>End slide-->
                <div class="clear"></div>
                <h3 id="RegisterHeader" style="color:#000000" align="center">

                    Account Registration
                </h3>

                <div id="Register" align="center" >
                    <form name="Registation">
                        <div id="">
                            <table>
                                <tr>
                                    <td></td>
                                    <td><div id="required" style="color: red; font-size: 10pt; margin-left: 91px" >All fields are required.</div></td>
                                </tr>
                                <tr>
                                    <td style="width: 120px">
                                        <p >Fullname:</p>
                                    </td>
                                    <td style="width: 500px">
                                        <input type="text" name ="txtFullname" id="txtFullname" style="width: 250px" value="" size ="25" onkeyup="validate()"/>
                                        <span id="notiUser" style="color: red; font-size: 7pt"></span>
                                    </td>
                                <tr>
                                    <td>
                                        <p>Email:</p></td>
                                    <td>
                                        <input type="text" name="txtEmail" value="" id="txtEmail" style="width: 250px" size ="25" onkeyup="validate()"/>
                                        <span id="notiMail" style="color: red; font-size: 7pt"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>Password:</p>
                                    </td>
                                    <td>
                                        <input type="password" name ="txtPassword1" value="" id="txtPassword1" size ="25" onkeyup="validate()"/>
                                        <span id="notiPass" style="color: red; font-size: 7pt"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p style="width: 120px">Retype Password:</p>
                                    </td>
                                    <td>
                                        <input type="password" name ="txtRetypePassword" value="" id="txtRetypePassword" size ="25" onkeyup="validate()"/>
                                        <span id="notiRePass" style="color: red; font-size: 7pt"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>Phone:</p>
                                    </td>
                                    <td>
                                        <input type="text" name="txtPhone" value="" id="txtPhone" size ="25" onkeyup="validate()"/>
                                        <span id="notiPhone" style="color: red; font-size: 7pt"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>Address:  </p>
                                    </td>
                                    <td><input type="text" name="txtAddress" value="" id="txtAddress" style="width: 400px" size ="25" onkeyup="validate()"/>
                                        <span id="notiAdd" style="color: red; font-size: 7pt"></span>
                                    </td>
                                </tr>

                                <tr style="height: 40px">
                                    <td></td>
                                    <td><div id="Message" style="color: red; font-size: 12pt; margin-left: 91px" ></div></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <center>
                                            <span id="button-register">
                                                <input class="button" type="button" value="Register" name="action" onclick="registerCustomer();"/>
                                                <input class="button" type="reset" value="Reset" name="action"/>
                                            </span>

                                        </center>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                </div>

            </div><!--End body-->
            <div id="fotter"><center>
                    <span> ﻿© 2023 by FPT_University. All rights reserved.</span></center>
            </div><!--End fotter-->
        </div><!--End wrapper-->
    </body>
</html>
